<template>
  <div class="page-content">
    <hy-table
      :listData="dataList"
      v-bind="contentTableConfig"
      @selectionChange='selectionChange'
      :listCount="userCount"
      v-model:page="pageInfo"
      >
        <!-- 1.header插槽 -->
        <template #handerHandler>
         <el-button v-if="isCreate" type="primary" size="medium"
         @click="handleNewClick"
         >
          新建用户
         </el-button>
         <!-- <el-button :icon="Refresh" size="medium">刷新</el-button> -->
        </template>
        <!-- 2.列中的插槽 -->
        <template #status="scope">
          <el-button size="mini" :type="scope.row.enable ? 'success' : 'danger'" plain>
            {{scope.row.enable ? '启用' : '禁用'}}
          </el-button>
        </template>
        <template #createAt="scope">
          <span>{{ $filters.formatTime(scope.row.createAt) }}</span>
        </template>
        <template #updateAt="scope">
          <span>{{ $filters.formatTime(scope.row.updateAt) }}</span>
        </template>
        <template #hander="scope">
          <div class="hander-btns">
            <el-button v-if="isUpdate" size='mini'
             :icon="Edit" type="text"
             @click="handleEditClick(scope.row)"
            >编辑</el-button>
            <el-button v-if="isDelete" size='mini'
            :icon="Delete" type="text"
            @click="handleDeleteClick(scope.row)"
            >删除</el-button>
          </div>
        </template>
        <!-- <template #image="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.imgUrl"
            :preview-src-list="[scope.row.imgUrl]"
            fit="cover"
          >
          </el-image>
        </template> -->
        <!-- 在page-content中动态插入剩余的插槽 -->
        <template v-for="item in otherPropSlots" :key="item.prop" #[item.slotName] = "scope">
          <template v-if="item.slotName">
            <slot :name="item.slotName" :row="scope.row"></slot>
          </template>
        </template>
      </hy-table>
  </div>
</template>

<script lang="ts">
import { defineComponent , computed ,ref, watch} from "vue";
import  { useStore } from '@/store'
import HyTable from '@/base-ui/table'
import { Edit, Share, Delete, Search, Refresh } from '@element-plus/icons'
import { usePermission } from '@/hooks/use-permission'

export default defineComponent({
   components:{
    HyTable,
  },
  props:{
    contentTableConfig:{
      type:Object,
      require:true
    },
    pageName:{
      type:String
    }
  },
  emits:['newBtnClick','editBtnClick'],
  setup(props,{emit}) {
    const store = useStore();

    //获取操作权限
    const isCreate = usePermission(props.pageName||'','create')
    const isUpdate = usePermission(props.pageName||'','update')
    const isDelete = usePermission(props.pageName||'','delete')
    const isQuery = usePermission(props.pageName||'','query')

    //从vuex中获取
    const dataList = computed(()=>store.getters[`system/pageListData`](props.pageName));
    const userCount = computed(()=>store.getters[`system/pageListCount`](props.pageName));
    //分页
    const pageInfo = ref({currentPage:1,pageSize:10})
    watch(pageInfo,()=>{
      getPageData()
    })
     //发送网络请求
    const getPageData = (queryInfo: any = {}) => {
      if(!isQuery) return
      store.dispatch('system/getPageListAction',{
        // pageUrl:'/users/list',
        pageName:props.pageName,
        queryInfo:{
          offset:(pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
          size:pageInfo.value.pageSize,
          ...queryInfo
        }
      })
    }
    getPageData()

    //获取其他的动态插槽
    const otherPropSlots = props.contentTableConfig?.propList.filter(
      (item: any) => {
        if(
          item.slotName === 'status' ||
          item.slotName === 'createAt' ||
          item.slotName === 'updateAt' ||
          item.slotName === 'hander'
          ) return false
        return true
      }
    )

    //删除操作
    const handleDeleteClick = (item: any) => {
      // console.log(item)
      store.dispatch('system/deletePageDataAction',{
        pageName:props.pageName,
        id:item.id
      })
    }
    //点击新建用户
    const handleNewClick = () => {
      // console.log(111)
      emit('newBtnClick')
    }
    //点击编辑
    const handleEditClick = (item: any) => {
      // console.log(111)
      emit('editBtnClick',item)
    }
    return {
      dataList,
      userCount,
      Edit,
      Delete,
      Refresh,
      getPageData,
      pageInfo,
      otherPropSlots,
      isCreate,
      isUpdate,
      isDelete,
      isQuery,
      handleDeleteClick,
      handleNewClick,
      handleEditClick,
    }
  }
})
</script>

<style lang="less" scoped>
.page-content{
  padding: 15px;
}
</style>
